<template>
	<view class="page-cont">
		<navbar title="用电对比"></navbar>
		<view class="main-cont" :style="{height: pageHeight, paddingLeft: sysStatusBarHeight}">
			<check-compare-bar class="bar-cont" ref="compareBar"></check-compare-bar>
		</view>
	</view>
</template>
<script setup lang="ts">
	import { reactive, ref,onMounted } from 'vue';
	import { onShow, onLoad } from "@dcloudio/uni-app";
	import { useNavbar } from "@/utils/hooks.js";
	import CheckCompareBar from './components/check-compare-bar.vue';
	const { pageHeight, sysStatusBarHeight } = useNavbar();
	import { useEnergyCheck } from '@/store/energy-check'

	const energyCheck = useEnergyCheck()
	
	//用电对比
	const compareBar = ref();
	
	onMounted(() => {
		compareBar.value.initData(energyCheck.key, energyCheck.data, energyCheck.lastData);
	})

</script>
<style lang="scss" scoped>
	.page-cont {
		.main-cont {
			padding-bottom: 10px;
			box-sizing: border-box;
		}

		.bar-cont {
			width: 100%;
			height: 100%;
		}
	}
</style>